{% extends "./inc/base.html" %}

{% block content %}
<!-- 
				PAGE HEADER 
				
				CLASSES:
					.page-header-xs	= 20px margins
					.page-header-md	= 50px margins
					.page-header-lg	= 80px margins
					.page-header-xlg= 130px margins
					.dark			= dark page header

					.shadow-before-1 	= shadow 1 header top
					.shadow-after-1 	= shadow 1 header bottom
					.shadow-before-2 	= shadow 2 header top
					.shadow-after-2 	= shadow 2 header bottom
					.shadow-before-3 	= shadow 3 header top
					.shadow-after-3 	= shadow 3 header bottom
			-->
<section class="page-header page-header-xs">
    <div class="container">
        <!-- breadcrumbs -->
        <ol class="breadcrumb breadcrumb-inverse">
            <li><a href="/index">首页</a></li>
            <li class="active">注册</li>
        </ol>
        <!-- /breadcrumbs -->
    </div>
</section>

<!-- -->
<section>
    <div class="container">
        <div class="row">
            <!-- LOGIN -->
            <div class="col-md-6 col-sm-6">
                <!-- ALERT -->
                <!--
							<div class="alert alert-mini alert-danger margin-bottom-30">
								<strong>Oh snap!</strong> Login Incorrect!
							</div>
							-->
                <!-- /ALERT -->
                {%if config.setup.USER_ALLOW_REGISTER ==1%}
                {%if HOOK@smsRegistration %}
                {{HOOK@smsRegistration|safe}}
                {%else%}
                <!-- register form 普通注册-->
                <form class="nomargin sky-form boxed registerpost" action="/center/public/register" method="post">
                    <header>
                        <i class="fa fa-users"></i> {{controller.meta_title}}
                    </header>
                    <fieldset class="nomargin">
                        <label class="input margin-bottom-10">
                            <i class="ico-append fa fa fa-user"></i>
                            <input type="text" placeholder="用户名" name="username">
                            <b class="tooltip tooltip-bottom-right">字母，数字等，用户名唯一</b>
                        </label>
                        <label class="input margin-bottom-10">
                            <i class="ico-append fa fa-envelope"></i>
                            <input type="email" placeholder="电子邮箱" name="email">
                            <b class="tooltip tooltip-bottom-right">user@cmswing.com</b>
                        </label>
                        <label class="input margin-bottom-10">
                            <i class="ico-append fa fa-mobile"></i>
                            <input type="text" placeholder="手机号码" name="mobile">
                            <b class="tooltip tooltip-bottom-right">18688888888</b>
                        </label>
                        <label class="input margin-bottom-10">
                            <i class="ico-append fa fa-lock"></i>
                            <input type="password" placeholder="密码" name="password">
                            <b class="tooltip tooltip-bottom-right">不少于6位</b>
                        </label>
                        <label class="input margin-bottom-10">
                            <i class="ico-append fa fa-lock"></i>
                            <input type="password" placeholder="确认密码" name="password2">
                            <b class="tooltip tooltip-bottom-right">确认密码</b>
                        </label>
                        <div class="margin-top-30">
                            <label class="checkbox nomargin">
                                <input class="checked-agree" type="checkbox" name="clause" checked><i></i>我同意 <a href="#"
                                    data-toggle="modal" data-target="#termsModal">网站服务条款</a></label>
                            <label class="checkbox nomargin">
                                <input type="checkbox" name="info"><i></i>我想接收新闻和特别优惠信息！</label>
                        </div>
                    </fieldset>
                    <div class="row margin-bottom-20">
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary ajax-post" target-form="registerpost"><i class="fa fa-check"></i>
                                立即注册</button>
                        </div>
                    </div>
                </form>
                {%endif%}
                <!-- /register form -->
                {%else%}
                <div class="alert alert-warning margin-bottom-30">
                    <!-- WARNING -->
                    <strong>提示!</strong> 注册功能已关闭,不允许新用户注册！
                </div>
                {%endif%}
            </div>
            <!-- /LOGIN -->
            <!-- SOCIAL LOGIN -->
            <div class="col-md-6 col-sm-6">
                <form action="#" method="post" class="sky-form boxed">
                    <header class="size-18 margin-bottom-20">
                        使用你最常用的社交账号登陆
                    </header>
                    <fieldset class="nomargin">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-2">
                                {{HOOK@logins|safe}}
                            </div>
                        </div>
                    </fieldset>
                    <footer>
                        我已经有一个帐户 <a href="/center/public/login" data-toggle="ajaxModal"><strong>立即登录!</strong></a>
                    </footer>
                </form>
            </div>
            <!-- /SOCIAL LOGIN -->
        </div>
    </div>
</section>
<!-- / -->
<!-- MODAL -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModal">网站服务 &amp; 条款</h4>
            </div>

            <div class="modal-body modal-short">
                <h4><b>网站服务条款</b></h4>
                <p>内容。。。</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">去你的</button>
                <button type="button" class="btn btn-primary" id="terms-agree"><i class="fa fa-check"></i> 我同意</button>
                <a href="#" target="_blank" rel="nofollow" class="btn btn-danger pull-left"><i class="fa fa-print"></i><span
                        class="hidden-xs">
                        Print</span></a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /MODAL -->


<!-- /PAGE HEADER -->
{% endblock %}

{% block script %}
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript">
	/**
		Checkbox on "I agree" modal Clicked!
	**/
    jQuery("#terms-agree").click(function () {
        jQuery('#termsModal').modal('toggle');

        // Check Terms and Conditions checkbox if not already checked!
        if (!jQuery("#checked-agree").checked) {
            jQuery("input.checked-agree").prop('checked', true);
        }

    });
</script>
{% endblock %}